import React from "react";
import { Block } from "@design/core";
import { FormattedMessage } from "react-intl";
import messages from "@i18n/messages";
import TYPE from "@design/constant/component-type";
import intl from 'react-intl-universal';

const visualGroup = {
  key: "visual",
  title: <FormattedMessage {...messages.visualComponent} />,
  buttons: [
    {
      title: <FormattedMessage {...messages.textComponent} />,
      key: "text",
      node: () => {
        return Block.create({
          type: TYPE.TEXT,
          data: { 
            text: intl.get(messages.textComponent.text.id),
          },
        });
      },
    },
    {
      key: "divider",
      title: <FormattedMessage {...messages.dividerComponent} />,
      node: () => {
        return Block.create({
          type: TYPE.DIVIDER,
        });
      },
    },
    {
      title: <FormattedMessage {...messages.calculateComponent} />,
      key: "calculate",
      node: () => {
        return Block.create({
          type: TYPE.CALCULATE,
          data: {
            start: intl.get(messages.calculateComponent.start.id),
            end: intl.get(messages.calculateComponent.end.id),
            type: 'number',
          },
          // style: { width: "70px" }
        });
      },
    },
  ],
};

const inputGroup = {
  key: "input",
  title: <FormattedMessage {...messages.inputComponent} />,
  buttons: [
    {
      title: <FormattedMessage {...messages.textInputComponent} />,
      key: "textInput",
      node: () => {
        return Block.create({ type: TYPE.TEXT_INPUT, data: { type: "text" } });
      },
    },
    {
      title: <FormattedMessage {...messages.selectComponent} />,
      key: "select",
      node: () => {
        return Block.create({
          type: TYPE.SELECT,
          data: { placeholder: "please select one item" },
          style: { width: "150px" },
        });
      },
    },
    {
      title: <FormattedMessage {...messages.radioComponent} />,
      key: "radio",
      node: () => {
        return Block.create({
          type: TYPE.RADIO,
        });
      },
    },
    {
      title: <FormattedMessage {...messages.checkboxComponent} />,
      key: "checkbox",
      node: () => {
        return Block.create({
          type: TYPE.CHECKBOX,
        });
      },
    },
    {
      title: <FormattedMessage {...messages.textAreaComponent} />,
      key: "textArea",
      node: () => {
        return Block.create({ type: TYPE.TEXT_AREA });
      },
    },
    {
      title: <FormattedMessage {...messages.uploadComponent} />,
      key: "upload",
      node: () => {
        return Block.create({ type: TYPE.UPLOAD });
      },
    },
    {
      title: <FormattedMessage {...messages.datePickerComponent} />,
      key: "datePicker",
      node: () => {
        return Block.create({ type: TYPE.DATEPICKER });
      },
    },
    {
      title: <FormattedMessage {...messages.approvalComponent} />,
      node: () => {
        return Block.create({ type: TYPE.APPROVAL });
      },
    },
  ],
};

export default [ visualGroup, inputGroup ];
